<template>
  <div class="app-container">
    <dk-query
      ref="nxIB"
      :searchForm="queryParams"
      :inputList="inputList"
      :queryTable="click().handleQuery"
      labelWidth="110"
      style="display: flex"
    >
      <template #common-button-text>
        <span style="margin: 0 42px; font-weight: bold; color: #606266"
          >商品ID:{{ goodsInfo.goodsId }}</span
        >
        <span style="font-weight: bold; color: #606266"
          >商品名称:{{ goodsInfo.goodsName }}</span
        >
      </template>
    </dk-query>

    <dk-table
      ref="table"
      :column="column"
      :pagination="paginationObjs"
      :tableData="tableData"
      :height="tableHeight"
    >
    </dk-table>
  </div>
</template>

<script>
// 接口api：first step
import {
  getOrderGoodsEvaluateList,
  exportOrderGoodsEvaluateType,
  delOrderGoodsEvaluateType,
  editOrderGoodsEvaluate,
} from '@/api/list/order/order-evaluate-list.js';

export default {
  data() {
    return {
      loading: true,
      goodsInfo: {
        goodsName: '',
        goodsId: '',
      },
      // 规程toolbar：two step
      inputList: [
        {
          type: 'input',
          placeholder: '请输入',
          label: '用户关键词',
          name: 'userNickName',
        },
        {
          type: 'select',
          placeholder: '请选择',
          label: '星级',
          name: 'starLevel',
          optionList: [
            {
              name: '星级1',
              value: 1,
            },
            {
              name: '星级2',
              value: 2,
            },
            {
              name: '星级3',
              value: 3,
            },
            {
              name: '星级4',
              value: 4,
            },
            {
              name: '星级5',
              value: 5,
            },
          ],
        },
        {
          type: 'daterange',
          placeholder: '选择创建时间',
          label: '创建时间',
          name: 'dateRange',
          fun: (row) => {
            this.queryParams.dateRange[0] = `${row[0]} 00:00:00`;
            this.queryParams.dateRange[1] = `${row[1]} 23:59:59`;
          },
        },

        {
          type: 'common-button',
          isShowAdd: true,
          isShowExport: true,
          hasPermissObj: {
            add: () => `${this.urlObject.permissPrefix}add`,
          },
          hasPermissObj: {
            export: () => `${this.urlObject.permissPrefix}export`,
          },
          searchFun: (searchForm) => {
            this.queryParams = searchForm;
            this.click().handleQuery();
          },
          resetFun: () => {
            this.click().resetQuery();
          },
          addFun: () => {
            this.click().handleAdd();
          },
          exportFun: () => {
            this.click().handleExport();
          },
        },
      ],
      // 规程表头：shree step
      column: [
        {
          value: 'userNickName',
          name: '用户昵称',
        },
        {
          value: 'userPhone',
          name: '手机号',
        },
        {
          value: 'starLevel',
          name: '星级',
        },
        {
          value: 'sourceType',
          name: '来源',
          stateList: [
            {
              name: '后台新增',
              value: 1,
            },
            {
              name: '用户端提交',
              value: 2,
            },
            {
              name: '系统自动好评',
              value: 3,
            },
          ],
        },
        {
          value: 'content',
          name: '评价内容',
        },
        {
          value: 'status',
          name: '状态',
          stateList: [
            {
              name: '正常',
              value: 0,
            },
            {
              name: '禁用',
              value: 1,
            },
          ],
        },
        {
          value: 'createTime',
          name: '创建时间',
        },
        {
          width: 320,
          value: 'id',
          name: '管理',
          fixed: 'right',
          type: 'button',
          buttonList: [
            {
              type: 'no-tooltip',
              name: '恢复',
              fun: (row) => {
                this.click().handleUpdate(row);
              },
              showFun: (row) => {
                return row.status !== 0;
              },
              color: 'text',
              icon: 'el-icon-edit',
            },
            {
              type: 'no-tooltip',
              name: '禁用',
              fun: (row) => {
                this.click().handleUpdate(row);
              },
              showFun: (row) => {
                return row.status == 0;
              },
              color: 'text',
              icon: 'el-icon-edit',
            },
            {
              type: 'no-tooltip',
              name: '详情',
              fun: (row) => {
                this.click().handleDetail(row);
              },
              color: 'text',
              icon: 'el-icon-edit',
              hasPermiss: () => `${this.urlObject.permissPrefix}detail`,
            },
          ],
        },
      ],
      // 分页器
      paginationObjs: {
        paginationChange: function () {
          this.network().getList(false);
        }.bind(this),
        page: 1,
        limit: 10,
        total: 0,
        loading: false,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        enrollEndTime: null,
        endTime: null,
        applicants: null,
        money: null,
        isWholeCountry: null,
        provinceArr: null,
        cityArr: null,
        provinceCityArr: null,
        address: null,
        latitude: null,
        longitude: null,
        img: null,
        content: null,
        status: null,
        qrcodeUrl: null,
        isDeleted: null,
      },
      // 表格数据
      tableData: [],
      // url对象：four step
      urlObject: {
        permissPrefix: 'store-manage:commodity-manage:comment:',
        routePathPrefix: '/store-manage/commodityManage/comment/',
      },
      // 接口存储对象：five step
      interfaceObj: {
        editApiName: editOrderGoodsEvaluate,
        getApiName: getOrderGoodsEvaluateList,
        delApiName: delOrderGoodsEvaluateType,
        exportApiName: exportOrderGoodsEvaluateType,
      },
    };
  },
  created() {
    this.goodsId = this.$route.query.goodsId;
    this.network().getList(this.goodsId);
    // this.network().getComment();
    this.getTableHeight.call(this);
    this.goodsInfo.goodsId = this.$route.query.goodsId;
    this.goodsInfo.goodsName = this.$route.query.goodsName;
  },
  methods: {
    click() {
      return {
        detail: {},
        // 搜索
        handleQuery: async () => {
          this.paginationObjs.page = 1;
          this.network().getList(this.goodsId);
        },
        // 重置
        resetQuery: async () => {
          this.queryParams = this.$options.data().queryParams;
          this.paginationObjs = this.$options.data().paginationObjs;
          this.network().getList(this.goodsId);
        },
        // 详情
        handleDetail: async (row) => {
          this.$router.push({
            path: `${this.urlObject.routePathPrefix}detail/${row.id}?goodsId=${this.goodsId}`,
          });
        },
        // 新增
        handleAdd: async () => {
          this.$router.push({
            path: `${this.urlObject.routePathPrefix}edit?goodsId=${this.goodsId}`,
          });
        },
        // 编辑
        handleUpdate: async (row) => {
          this.interfaceObj
            .editApiName({
              ...row,
              status: row.status ^ 1,
              goodsId: this.goodsId,
            })
            .then((res) => {
              this.$modal.msgSuccess('更新成功');
              this.network().getList(this.goodsId);
            });
        },
        // 删除
        handleDelete: async (row) => {
          this.deleteMessageBox({
            name: `设计师姓名：${row.name || ''}`,
            message: '是否确认删除该设计师？',
          }).then(() => {
            this.network().handleDelete(row.id);
          });
        },

        // 导出
        handleExport: async (row) => {
          const params = this.deepCopy(this.queryParams);
          delete params.dateRange;
          const obj = {
            ...params,
            beginTime: this.queryParams.dateRange?.[0],
            afterTime: this.queryParams.dateRange?.[1],
          };

          this.download(
            '/cms-shop/api/goods-base/export',
            {
              ...obj,
            },
            `商品管理_查看评价_${this.getDateTime()}.xlsx`
          );
        },
      };
    },
    network() {
      return {
        getComment: async () => {
          const { id } = this.$route.query;
          this.paginationObjs.loading = true;
          try {
            const { data } = await getBrandInfo({ id });
            this.paginationObjs.loading = false;
            this.detail = data;

            // this.detail.shopName =
            //   shopList.find(it => it.id === this.detail.shopId)?.shopName
            // this.detail.address =
            //   shopList.find(it => it.id === this.detail.shopId)?.address
            // this.detail.meritoName = data.martBrandMainTypeVos.length > 0
            //   ? data.martBrandMainTypeVos
            //   .map(it => it.brandTypeName || '')
            //   .join('、') : ''
          } catch (error) {
            this.paginationObjs.loading = false;
          }
        },
        getList: async (id) => {
          const params = this.deepCopy(this.queryParams);
          delete params.dateRange;
          const obj = {
            ...params,
            pageNum: this.paginationObjs.page,
            pageSize: this.paginationObjs.limit,
            beginTime: this.queryParams.dateRange?.[0],
            afterTime: this.queryParams.dateRange?.[1],
          };
          this.paginationObjs.loading = true;
          try {
            const { getApiName } = this.interfaceObj;
            const data = await getApiName({ ...obj, goodsId: id });
            this.paginationObjs.loading = false;
            this.tableData = data.rows;
            this.paginationObjs.total = data.total;
          } catch (error) {
            this.paginationObjs.loading = false;
          }
        },
        handleDelete: async (id) => {
          console.log(this.goodsId, id);
          const { delApiName } = this.interfaceObj;
          const { code } = await delApiName({ id });
          if (code === 0) {
            this.$modal.msgSuccess('删除成功');
          }
          this.network().getList(this.goodsId);
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-message-box__title span {
  position: relative;
  left: 37px !important;
}
</style>
